<template>
  <div>
    <Modal v-model="show" title="添加用户"
            :mask-closable="false" :closable="false">
        <Form ref="modalForm" :model="data" :rules="ruls"
                    :label-width="80">
            <FormItem label="用户名" prop="uname">
                <Input v-model.trim="data.uname" placeholder="用户名" ></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input  v-model.trim="data.password" placeholder="密码"></Input>
            </FormItem>
            <FormItem label="手机" prop="ucall">
                <Input  v-model.trim="data.ucall" placeholder="手机"></Input>
            </FormItem>

            <FormItem label="身份uid" prop="uid">
                <Input v-model.trim="data.uid" placeholder="身份uid"></Input>
            </FormItem>

            <FormItem label="银行卡" prop="ucard">
                <Input  v-model.trim="data.ucard" placeholder="银行卡"></Input>
            </FormItem>

            <FormItem label="地址" prop="uaddr">
                <Input  v-model.trim="data.uaddr" placeholder="地址"></Input>
            </FormItem>


            <Form-item label="商户选择" prop="amount">
                <Select v-model="data.mname">
                    <Option v-for="item in mnameList" :value="item.mId" :key="item.mId">{{ item.mName }}</Option>
                </Select>
            </Form-item>

            <Form-item label="角色选择" prop="productCode" >
                <Select v-model="data.role" placeholder="角色选择" >
                    <Option value="1" >超级用户</Option>
                    <Option value="2">商户</Option>
                    <Option value="3">业务员</Option>
                </Select>
            </Form-item>

            <Form-item label="添加时间" prop="请选择时间" >
                <DatePicker type="date"  v-model="data.signTime" placeholder="请选择时间" style="width: 387px"></DatePicker>
            </Form-item>

            <!--<FormItem label="角色选择" prop="userStatus">-->
                <!--&lt;!&ndash;<Select v-model.trim="data.userStatus" style="width:100%">&ndash;&gt;-->
                    <!--&lt;!&ndash;<Option v-for="item in [{label:'正常',value:1},{label:'锁定',value:0}]"&ndash;&gt;-->
                        <!--&lt;!&ndash;:value="item.value" :key="item.value">{{ item.label }}</Option>&ndash;&gt;-->
                <!--&lt;!&ndash;</Select>&ndash;&gt;-->
            <!--</FormItem>-->
            <!--<FormItem label="角色组" prop="roles">-->
                <!--<CheckboxGroup v-model="data.roles">-->
                    <!--<Checkbox v-for="(item,index) in roles" :label="index" :key="item.id">{{item.roleName}}</Checkbox>-->
                <!--</CheckboxGroup>-->
            <!--</FormItem>-->
        </Form>
        <div slot="footer">
            <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
            <Button type="primary" :loading="loading" @click="ok">确定</Button>
        </div>
    </Modal>
  </div>
</template>
<script>
import { post,get } from '@/libs/axios-cfg'
export default {
  data() {
    const validateConfirmPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.data.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      show: true,
      loading: false,
        mnameList: [],
      data: {
          mname: '',
          role: '',
          uname:"",
          password: "",
          ucall: "",
          uid: '',
          ucard: '',
          uaddr: '',

        //   "uid":"身份证",
        //   "ucard":"银行卡",
        //   "uaddr":"地址",
        //   "isExpiry":"2019-07-01T09:57:51.463Z",
        //   "bankName":"银行",
        //   "createTime":"2019-07-01T09:57:51.463Z",
        //   "signTime":"2019-07-01T09:57:51.463",
        //   "ustate":1,
        //   "email":"邮箱",
        //   "property":2,
        //   "role":3,
        //   "signature":"1111111",
        // userName: "",
        // age: 0,
        // userStatus: 1,
        // rePassword: "",
        // roles: []
      },
      ruls: {
        userName: [
            { required: true, message: "用户名不能为空" },
            {pattern:/^(\w){4,16}$/,message:'用户名应为[A-Za-z0-9_]组成的4-16位字符'}
        ],
        password: [
          { required: true, message: "请填写密码"},
          {pattern:/^(\w){6,18}$/,message:'密码应为[A-Za-z0-9_]组成的6-18位字符'}
        ],
        rePassword: [{ validator: validateConfirmPwd }],
        age: [{ required: true, message: "年龄不能为空" }],
        userStatus: [{ required: true, message: "用户状态不能为空" }],
        roles: [{ required: true, message: "请至少选择一个角色" }]
      }
    };
  },
  props: {
    roles: {
      type: Array,
      default: []
    }
  },
   created () {
      this.getMnameList()
    },
  methods: {
      async getMnameList () {
          try {
              let res = await get ('/merchant/nameList')
              this.mnameList = res.data
          }  catch (e){
              this.$throw(e)
          }
      },
    /**
     * @description 关闭Modal
     * @param reload 是否重新加载数据
     */
    cancel(reload = false) {
      this.$emit("cancel", "add", reload);
    },
    /**
     * @description 确定按钮单击回调
     */
    ok() {
      this.$refs.modalForm.validate(valid => {
        if (valid) {
            // let roles = []
            // this.data.roles.forEach(el=>{
            //     roles.push(this.roles[el]);
            // })
            let data = JSON.parse(JSON.stringify(this.data));
           // data.roles = roles;
            this.add(data)
        }
      });
    },
    /**
     * @description 添加用户数据请求
     */
    async add(data){
        this.loading = true;
        try {
            let res = await post('/user/save',data)
            this.$Message.success(res.msg);
            this.cancel(true)
        } catch (error) {
            this.$throw(error)
        }
        this.loading = false;
    }
  }
};
</script>

